<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:11:07
 * @LastEditors: 迟天祎 3605405300@qq.com
 * @LastEditTime: 2025-09-28 10:46:23
-->
<template>
  <div>
    <!-- 搜索区域开始 -->
    <el-form :inline="true" :model="form" class="search-form">
      <el-form-item label="课程名称">
        <el-select v-model="form.course" placeholder="请选择课程" clearable filterable>
          <el-option v-for="course in courses" :key="course.id" :label="course.name" :value="course.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="normal"></el-option>
          <el-option label="结束" value="ended"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetForm" style="margin-left: 8px;">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索区域结束 -->

    <!-- 课程列表表格 -->
    <el-table :data="filteredCourses" border style="width: 100%; margin-top: 12px;" v-loading="searching" size="medium">
      <el-table-column prop="id" label="课程ID" align="center"></el-table-column>
      <el-table-column prop="name" label="课程名称" align="center"></el-table-column>
      <el-table-column prop="teacher" label="授课教师" align="center"></el-table-column>
      <el-table-column prop="credit" label="学分" align="center"></el-table-column>
      <el-table-column prop="classHour" label="课时" align="center"></el-table-column>
      <el-table-column prop="studentCount" label="选课人数" align="center"></el-table-column>
      <el-table-column prop="status" label="课程状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'normal' ? 'success' : 'info'" size="small">
            {{ scope.row.status === 'normal' ? '正常' : '结束' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startDate" label="上课日期" align="center"></el-table-column>
      <!-- 删除操作列 -->
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="danger" plain disabled icon="el-icon-delete" @click="handleDeleteCourse(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  data() {
    return {
      // 搜索表单数据
      form: {
        course: '',
        status: ''
      },
      // 课程基础列表（用于搜索下拉选择）
      courses: [
        { id: 1, name: '高等数学' },
        { id: 2, name: '线性代数' },
        { id: 3, name: '大学物理' },
        { id: 4, name: '计算机基础' },
        { id: 5, name: '程序设计' },
        { id: 6, name: '数据结构' },
        { id: 7, name: '操作系统' },
        { id: 8, name: '计算机网络' },
        { id: 9, name: '数据库原理' },
        { id: 10, name: '人工智能' }
      ],
      // 课程详细数据（含选课人数）
      courseDetails: [
        { id: 1, name: '高等数学', teacher: '张三', credit: 4, classHour: 64, studentCount: 58, status: 'normal', startDate: '2024-09-01' },
        { id: 2, name: '线性代数', teacher: '李四', credit: 3, classHour: 48, studentCount: 45, status: 'normal', startDate: '2024-09-01' },
        { id: 3, name: '大学物理', teacher: '王五', credit: 5, classHour: 80, studentCount: 62, status: 'normal', startDate: '2024-09-01' },
        { id: 4, name: '计算机基础', teacher: '赵六', credit: 3, classHour: 48, studentCount: 71, status: 'normal', startDate: '2024-09-01' },
        { id: 5, name: '程序设计', teacher: '钱七', credit: 4, classHour: 64, studentCount: 49, status: 'normal', startDate: '2024-09-01' },
        { id: 6, name: '数据结构', teacher: '孙八', credit: 4, classHour: 64, studentCount: 38, status: 'normal', startDate: '2024-09-01' },
        { id: 7, name: '操作系统', teacher: '周九', credit: 4, classHour: 64, studentCount: 42, status: 'normal', startDate: '2024-09-01' },
        { id: 8, name: '计算机网络', teacher: '吴十', credit: 4, classHour: 64, studentCount: 35, status: 'ended', startDate: '2024-03-01' },
        { id: 9, name: '数据库原理', teacher: '郑一', credit: 4, classHour: 64, studentCount: 41, status: 'ended', startDate: '2024-03-01' },
        { id: 10, name: '人工智能', teacher: '王二', credit: 3, classHour: 48, studentCount: 53, status: 'normal', startDate: '2024-09-01' }
      ],
      // 筛选后的课程列表
      filteredCourses: [],
      // 搜索状态相关
      searchStatus: false,
      searching: false
    };
  },
  created() {
    // 初始化显示所有课程
    this.filteredCourses = [...this.courseDetails];
  },
  methods: {
    /**
     * 搜索功能：根据选择的课程和状态筛选数据
     */
    handleSearch() {
      this.searchStatus = true;
      this.searching = true;

      setTimeout(() => {
        let results = [...this.courseDetails];

        // 根据课程筛选
        if (this.form.course) {
          results = results.filter(course => course.id === this.form.course);
        }

        // 根据状态筛选
        if (this.form.status) {
          results = results.filter(course => course.status === this.form.status);
        }

        this.filteredCourses = results;
        this.searching = false;
      }, 500);
      
    },

    /**
     * 重置搜索表单
     */
    resetForm() {
      this.form = {
        course: '',
        status: ''
      };
      this.filteredCourses = [...this.courseDetails];
      this.searchStatus = false;
    },

    /**
     * 删除课程
     */
    handleDeleteCourse(id) {
      this.$confirm('确定要删除这门课程吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.courseDetails = this.courseDetails.filter(course => course.id !== id);
        this.filteredCourses = this.filteredCourses.filter(course => course.id !== id);
        this.$message({
          type: 'success',
          message: '课程删除成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
